<!DOCTYPE html>
<html>
  <head>
    <title>Arc and Pie</title>
    <script src="../js/d3.min.js"></script>
    <script src="../js/color-strategies.js"></script>
  </head>
  <body>
    <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
    <script>
        const data = [{name: 'Shao-Kui', value:6},
        {name:'Wen-Yang', value:6}, {name:'Cai Yun', value:16}, 
        {name:'Liang Yuan', value: 10}, {name:'Yuan-Chen', value:6}, 
        {name:'Rui-Long', value:10}, {name:'Dong Xin', value:12}, 
        {name:'He Yu', value:20}, {name:'Xiang-Li', value:12}, 
        {name:'Godness', value:20}, {name:'Wei-Yu', value:15}, 
        {name:'Chen Zheng', value:14}, {name:'Yu Peng', value:14.5}, 
        {name:'Li Jian', value:22}]; 

        // the following code are typical code for visualization; 
        const svg = d3.select('#mainsvg');
        const width = +svg.attr('width');
        const height = +svg.attr('height');
        const margin = {top: 60, right: 30, bottom: 60, left: 150};
        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;
        const g = svg.append('g').attr('id', 'maingroup')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

        // create the group to contain our chart; 
        const arcGroup = g.append('g').attr('id', 'arcGroup')
        .attr('transform', `translate(${width / 2}, ${height / 2})`);

        // mapping range from 
        const rScale = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .range([0, innerWidth / 3.5])

        const arcGenerator = d3.arc()
        .innerRadius(0)
        .outerRadius( d => rScale(d.data.value));

        const pie = d3.pie()
        .value( d => d.value );

        const color = d3.scaleOrdinal()
        .domain( data.map( d => d.name ) )
        .range( caiyun1 );

        arcGroup.selectAll('path').data(pie(data), d => d.name).join('path')
        .attr('fill', d => color(d.data.name))
        .attr('d', arcGenerator)
    </script>
  </body>
</html>